<template>
    <div id="outer" :style="{'--left':chuShiLeft+'vw'}" @click="shouQi" ref="outer">
        <div id="inner" @click.stop>
            <header>

            </header>
            <div id="vip">

            </div>
            <div id="my">
                <ul>
                    <li>我的消息</li>
                    <li>云贝中心</li>
                    <li>创作者中心</li>
                </ul>
            </div>
            <div id="yinYueFuWu">
                <div class="title">
                    音乐服务
                </div>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                    <li>555</li>
                    <li>666</li>
                </ul>
            </div>
            <div id="others">
                <div class="title">
                    其他
                </div>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                    <li>555</li>
                    <li>666</li>
                    <li>777</li>
                    <li>888</li>
                    <li>999</li>
                </ul>
            </div>
            <div id="last">
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                    <li>444</li>
                    <li>555</li>
                    <li>666</li>
                    <li>777</li>
                    <li>888</li>
                </ul>
            </div>
            <div id="logout">
                <span>退出登录/关闭</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AsideLeft",
        data(){
            return{
                chuShiLeft:-100
            }
        },
        methods:{
            yiDong(){
                const time = setInterval(()=>{
                    this.chuShiLeft+=10
                    if (this.chuShiLeft>=0){
                        clearInterval(time)
                    }
                },10)
            },
            shouQi(){
                const time = setInterval(()=>{
                    this.chuShiLeft-=10
                    if (this.chuShiLeft<=-100){
                        clearInterval(time)
                    }
                },10)
            }
        }
    }
</script>

<style scoped>
    #outer{
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,.3);
        position: absolute;
        top: 0;
        left: var(--left);
        z-index: 100;
    }
    #inner{
        width: 320px;
        height: 100%;
        background:lightgrey;
        overflow-y:scroll;
    }
    #inner::-webkit-scrollbar{
        display: none;
    }
    header,#inner>div{
        width: 90%;
        margin: 0 auto 10px auto;
    }
    header{
        height: 50px;
        background: red;
    }
    #vip{
        height: 100px;
        background: black;
        border-radius: 15px;
    }
    ul>li{
        height: 50px;
        line-height: 50px;
    }
    #my,#yinYueFuWu,#others,#last,#logout{
        background: #fff;
        border-radius: 15px;
        padding-left: 10px;
        /*padding-top: 10px;*/
    }
    .title{
        height: 50px;
        line-height: 50px;
        color: lightgrey;
        font-size: 14px;
    }
    #my li,.title{
        border-bottom: 1px solid lightgrey;
    }
    #logout{
        height: 60px;
        text-align: center;
    }
    #logout>span{
        color: red;
        position: relative;
        top: 20px;
    }
</style>